<template lang="html">
  <div class="top">
    <h4>招标公告</h4>
    <div class="top-container same-container" v-for="(item,index) in callBidsData"  @click="toDetail(item.id)">
      <div class="little">
        <div class="title">
          <h2>{{item.title}}</h2>
          <span>{{item.createdAt | timeFormat}}</span>
        </div>
        <div class="content">
          <ul>
            <li v-for="imgItem in _filterObj(item.files)">
              <img :src="imgItem.url" :lazy="lazyUrl" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="totalNum"
        :page-size="pageSize"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import {getGroupData} from 'api/article.js'

import {filterObj} from 'common/js/filterObj.js'

export default {
  data() {
    return {
      callBidsData: [],
      currentPage: 0,
      totalData: [],
      totalNum: 0,
      pageSize: 3,
      lazyUrl: require('./notice.png')
    }
  },
  methods: {
    toDetail(id) {
      this.$router.push('/index/bid-detail/' + id)
    },
    _filterObj(obj) {
      return filterObj(obj)
    },
    _getCallBids(tag) {
      getGroupData(tag).then((res) => {
        let data = res.data
        this.totalNum = data.length
        this.totalData = data
        this.callBidsData = data.slice(0, this.pageSize)
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val - 1
    }
  },
  created() {
    this._getCallBids('callbids')
  },
  watch: {
    currentPage(newVal) {
      this.callBidsData = this.totalData.slice(newVal * this.pageSize, (newVal + 1) * this.pageSize)
    }
  }
}
</script>

<style lang="scss">
.block{
  text-align: center;
  padding-top: 20px;
}
</style>
